<template>
  <gui-page
    ref="pageRef"
    class="gui-bg-white"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">详情</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column gui-padding">
        <!-- 主体区域 -->
        <view class="gui-border-b" style="padding-bottom: 20rpx">
          <text class="gui-block gui-h5 gui-bold gui-cate-right-title">后端开发-->>Java</text>
          <view class="gui-text-small gui-margin-top-small">互联网/互联网/通信/电子</view>
        </view>
        <view class="gui-margin-top">
          <view class="gui-bold">
            <text class="gui-h6">职业简介</text>
          </view>
          <text class="gui-text-small">
            后端开发是指构建和维护系统后台的软件开发工作。后台通常是指服务器端，负责处理数据存储、业务逻辑和与前端交互等任务。后端开发主要涉及以下方面的工作.
          </text>
        </view>
        <view class="gui-margin-top">
          <view class="gui-bold">
            <text class="gui-h6">专业要求</text>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-margin-top">
            <view class="gui-flex gui-rows gui-nowrap gui-border-l gui-border-t gui-bg-orange3 gui-color-white gui-dark-bg-level-2">
              <text class="gui-td gui-border-r gui-border-b gui-text-small gui-bold">姓名</text>
            </view>
            <view
              v-for="(item, index) in students"
              :key="index"
              class="gui-flex gui-rows gui-nowrap gui-border-l"
              :class="{ 'gui-bg-orange5': index % 2 === 1 }"
              @tap.stop="handleClick(item)"
            >
              <text class="gui-td gui-border-r gui-border-b gui-text-small">{{ item[0] }}</text>
            </view>
          </view>
        </view>
        <view class="gui-margin-top">
          <view class="gui-bold">
            <text class="gui-h6">薪资水平</text>
          </view>
          <view class="charts-box" style="height: 400px">
            <qiun-data-charts :canvas2d="true" :chart-data="chartsDataMap" :opts="{ extra: { map: { mercator: true } } }" type="map" />
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import mapData from '@/Grace6/data/mapdata.json'

const pageRef = ref<any>(null)
const pageLoading = ref<boolean>(false)
const students = ref<Array<any>>([
  ['小米', '一年二班', '男', 7],
  ['小明', '二年二班', '男', 6],
  ['小红', '一年三班', '女', 6],
  ['小雅', '一年五班', '女', 8],
  ['小艳', '一年二班', '女', 10],
])
const chartsDataMap = ref<any>({})
const handleClick = (e: any) => {
  console.log(e)
  uni.navigateTo({
    url: `../school/index?data=${JSON.stringify(e)}`,
  })
}
const getServerData = () => {
  setTimeout(() => {
    chartsDataMap.value = { series: mapData.features }
  }, 1500)
}
onLoad((option) => {
  console.log(JSON.parse(option.data))
  getServerData()
})
</script>
<style scoped>
.gui-td {
  width: 100rpx;
  flex: 1;
  overflow: hidden;
  padding: 20rpx 10rpx;
}
.gui-primary-text {
  line-height: 60rpx !important;
  font-size: 24rpx;
}

.charts-box {
  width: 100%;
  height: 300px;
}
</style>
